<template>
  <div class="page-container">
    <h1>广告投放增效工具（巨量信息流短剧）</h1>
    <el-form ref="form" :model="form" label-position="top">
      <el-form-item label="选择标题组">
        <el-select v-model="form.titleGroup" placeholder="请选择标题组">
          <el-option v-for="group in titleGroups" :key="group.value" :label="group.label" :value="group.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="自定义标题组">
        <el-input type="textarea" v-model="form.customTitleGroup" placeholder="请输入标题组，每行一个标题"></el-input>
      </el-form-item>
      <el-form-item label="获取数量">
        <el-input-number v-model="form.quantity" :min="1" :max="100" controls-position="right"></el-input-number>
      </el-form-item>
      <el-form-item label="标题分隔符">
        <el-select v-model="form.separator" placeholder="默认换行,无需选择">
          <el-option label="逗号" value=","></el-option>
          <el-option label="分号" value=";"></el-option>
          <el-option label="空格" value=" "></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getRandomTitlesAndCopy">获取并复制</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="copyCPMD">获取产品卖点</el-button>
        <el-button type="success" @click="copyXDHZ">获取行动号召</el-button>
      </el-form-item>
      <el-form-item v-if="randomTitles.length > 0">
        <p>随机标题：</p>
        <el-input ref="input" v-model="titleOutput" readonly type="textarea"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import titleGroups from "./ad-title.js";

export default {
  data() {
    return {
      form: {
        titleGroup: "",
        quantity: 5,
        separator: "\n",
        customTitleGroup: "",
      },
      titleGroups: titleGroups,
      cpmdText: "精彩剧集立马看 精彩剧立刻看 观看精彩短剧 精彩剧集等你 超高分的短剧 劲爆短剧现在看 一定不能错过的剧集 短剧的巅峰作品 观赏高分剧集 超好看的剧集",
      xdhzText: "查看全集 查看详情 继续观看 观看剧集 精彩不断 精彩继续 点击查看 立刻查看 立刻观看 不容错过",
      randomTitles: [],
      titleOutput: "",
    };
  },
  methods: {
    getRandomTitlesAndCopy() {
      if (!this.form.titleGroup && !this.form.customTitleGroup) {
        this.$message.error("请选择标题组或输入自定义标题组！");
        return;
      }
    
      let titles = [];
      if (this.form.titleGroup) {
        titles = titleGroups.find(group => group.value === this.form.titleGroup).titles;
      }
      if (this.form.customTitleGroup) {
        titles = titles.concat(this.form.customTitleGroup.split("\n"));
      }
    
      const shuffledTitles = this.shuffleArray(titles);
      this.randomTitles = shuffledTitles.slice(0, this.form.quantity);
    
      this.titleOutput = this.randomTitles.join(this.form.separator);
    
      this.copyToClipboard();
    },
    copyCPMD() {
      const text = this.cpmdText.replace(/ /g, this.form.separator);
      this.copyTextToClipboard(text);
    },
    copyXDHZ() {
      const text = this.xdhzText.replace(/ /g, this.form.separator);
      this.copyTextToClipboard(text);
    },
    copyTextToClipboard(text) {
      const textarea = document.createElement("textarea");
      textarea.value = text;
      textarea.setAttribute("readonly", "");
      textarea.style.position = "absolute";
      textarea.style.left = "-9999px";
      document.body.appendChild(textarea);
      textarea.select();
      document.execCommand("copy");
      document.body.removeChild(textarea);
      this.$message.success("已复制到剪贴板");
    },
    resetForm() {
      this.form.titleGroup = "";
      this.form.quantity = 5;
      this.form.separator = "\n";
      this.form.customTitleGroup = "";
      this.randomTitles = [];
      this.titleOutput = "";
    },
    shuffleArray(array) {
      let currentIndex = array.length;
      let temporaryValue, randomIndex;

      while (currentIndex !== 0) {
        randomIndex = Math.floor(Math.random() * currentIndex);
        currentIndex -= 1;

        temporaryValue = array[currentIndex];
        array[currentIndex] = array[randomIndex];
        array[randomIndex] = temporaryValue;
      }

      return array;
    },
    copyToClipboard() {
		// 使用异步防止第一次获取时复制失败
      navigator.clipboard.writeText(this.titleOutput)
        .then(() => {
          this.$message.success("已复制到剪贴板");
        })
        .catch((error) => {
          this.$message.error("复制失败：" + error);
        });
    },
  },
};
</script>

<style>
</style>